<template>
  <div class="qiuzhi">
    <div class="huangye_body minh389">
      <!-- <div class="hangye_nav_sy">
        <div class="title_l">招聘信息</div>
        <div class="iconfont icon-triangle-right"></div>
        <div
          class="huang_li"
          :class="{ active: index == huangNavSel }"
          v-for="(item, index) in huangNav"
          :key="index"
          @click="changeQiuzhi(item, index)"
        >
          {{ item.title }}
        </div>
      </div>
      <div v-if="huangNavSel==1">
        <img
          src="@assets/img/huangye/zhaopin_gg.jpg"
          alt=""
          class="fill_img"
          @click="nativeTo('login')"
        />
      </div>
      <div v-if="!isZhaopin && huangNavSel==0">
        <div class="shangxuan_sy">
          <div class="search_c">
            <div class="title_p">资源分类:</div>
            <div class="leibie">
              <div
                class="li_text"
                :class="{ active: danweileixingSel == 0 }"
                @click="duoSearch(0, 'ziyuan')"
              >
                全部
              </div>
              <div
                class="li_text"
                v-for="(item, index) in danweileixing"
                :key="index"
                :class="{ active: danweileixingSel == index + 1 }"
                @click="duoSearch(index + 1, 'ziyuan')"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="search_c">
            <div class="title_p">区域:</div>
            <div class="leibie">
              <div
                class="li_text"
                :class="{ active: cityListSel == 0 }"
                @click="duoSearch(0, 'quyu')"
              >
                全部
              </div>
              <div
                class="li_text"
                v-for="(item, index) in cityList"
                :key="index"
                @click="duoSearch(index + 1, 'quyu')"
                :class="{ active: cityListSel == index + 1 }"
              >
                {{ item.provinceName }}
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <div class="qiuzhi_content">
        <div class="content_left">
          <div class="tuiguang">
            <div class="title_c">智能推广</div>
            <div
              class="tuiguang_li_sy"
              v-for="(item, index) in tuiguangList"
              :key="index"
              v-show="isZhaopin"
            >
              <div class="nei_bd">
                <div class="title_t">{{ item.title }}</div>
                <div class="con_c">
                  <div class="neirong">工作地点:{{ item.gongzuoaddress }}</div>
                  <div class="neirong">薪酬:{{ item.xinzidaiyun }}</div>
                </div>
              </div>
            </div>
          </div>
          <img src="@assets/img/huangye/vip.jpg" alt="" class="tui_img" />
        </div>
        <div class="content_right_detail" v-show="isZhaoDetail">
          <div class="right_pt1">
            <div class="p_title">{{ currentItem.title }}</div>
            <div class="p_info">
              <span class="orange" v-if="currentItem.time">{{
                currentItem.time.split(" ")[0]
              }}</span
              >发布 , 已有<span class="orange">0</span>人投递简历
            </div>
          </div>
          <el-row class="row_hang">
            <el-col :span="4" class="col_title">企业名称 ： </el-col>
            <el-col :span="18">红旗渠建设集团有限公司 </el-col>
          </el-row>
          <el-row class="row_hang">
            <el-col :span="4" class="col_title">企业行业 ： </el-col>
            <el-col :span="8">{{ currentItem.zhiweitype }} </el-col>
            <el-col :span="4" class="col_title">薪资待遇 ： </el-col>
            <el-col :span="8">{{ currentItem.xinzidaiyun }} </el-col>
          </el-row>
          <el-row class="row_hang">
            <el-col :span="4" class="col_title">招聘人数 ： </el-col>
            <el-col :span="8">{{ currentItem.zhaopinrenshu }} </el-col>
            <el-col :span="4" class="col_title">学历要求 ： </el-col>
            <el-col :span="8">{{ currentItem.xueli }} </el-col>
          </el-row>
          <el-row class="row_hang">
            <el-col :span="4" class="col_title">招聘职位 ： </el-col>
            <el-col :span="8">{{ currentItem.title }} </el-col>
            <el-col :span="4" class="col_title">工作年限 ： </el-col>
            <el-col :span="8">{{ currentItem.gongzuonx }} </el-col>
          </el-row>
          <el-row class="row_hang">
            <el-col :span="4" class="col_title">工作地址 ： </el-col>
            <el-col :span="18">{{ currentItem.gongzuoaddress }} </el-col>
          </el-row>

          <div class="zhaopin_tit">
            <div class="iconfont icon-biaotizhishi">职位描述</div>
          </div>
          <div v-html="currentItem.content" class="zhaopin_desc v_html_img"></div>
          <div class="zhaopin_ctrl">
            <el-button
              size="small"
              class="btn"
              icon="el-icon-user-solid"
              type="primary"
              >投递简历</el-button
            >
            <el-button size="small" class="btn" type="primary"
              >收藏职位</el-button
            >
          </div>
        </div>
        <div class="toupiao_right" v-if="huangNavSel==1">
          <div class="tou" v-for="(tItem,tIndex) in  toupiaoList" :key="tIndex">

            <img :src="tItem.img" alt="" class="leftt_img">
            <div class="tt_right">
              <div class="titlec shengluehao">{{tItem.type}}</div>
              <div class="tt2 shengluehao">{{tItem.desc}}</div>
              <div class="flex_d">
                <div class="ttnum">浏览次数：{{tItem.lookrecord}}</div>
                <el-button size="mini" type="primary" @click="seeEvm(tItem.url)">查看详情</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="content_right" v-show="!isZhaoDetail && huangNavSel==0">
          <div class="right_nav_qz">
            <div class="nav_c_left">
              <div class="search_name">
                <el-input
                  placeholder="输入关键词"
                  v-model="searchKey"
                  class="input-with-select"
                  size="small"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="duoSearchC('', 'key')"
                    >搜索</el-button
                  >
                </el-input>
              </div>
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#ffffff"
                text-color="#666"
                active-text-color="#2172ce"
              >
                <el-submenu index="1">
                  <template slot="title">薪酬</template>
                  <el-menu-item index="1-1" @click="duoSearchC('', 'xinchou')"
                    >不限</el-menu-item
                  >
                  <el-menu-item
                    index="1-2"
                    @click="duoSearchC('面谈', 'xinchou')"
                    >面谈</el-menu-item
                  >
                  <el-menu-item
                    index="1-3"
                    @click="duoSearchC('2000元以下', 'xinchou')"
                    >2000元以下</el-menu-item
                  >
                  <el-menu-item
                    index="1-4"
                    @click="duoSearchC('2001到4000元', 'xinchou')"
                    >2001到4000元</el-menu-item
                  >
                  <el-menu-item
                    index="1-5"
                    @click="duoSearchC('4001到6000元', 'xinchou')"
                    >4001到6000元</el-menu-item
                  >
                  <el-menu-item
                    index="1-6"
                    @click="duoSearchC('6001到8000元', 'xinchou')"
                    >6001到8000元</el-menu-item
                  >
                  <el-menu-item
                    index="1-7"
                    @click="duoSearchC('8001到1万元', 'xinchou')"
                    >8001到1万元</el-menu-item
                  >
                  <el-menu-item
                    index="1-8"
                    @click="duoSearchC('1万到1.5万元', 'xinchou')"
                    >1万到1.5万元</el-menu-item
                  >
                  <el-menu-item
                    index="1-9"
                    @click="duoSearchC('1.5万元以上', 'xinchou')"
                    >1.5万元以上</el-menu-item
                  >
                </el-submenu>
                <el-submenu index="2">
                  <template slot="title">工作经验</template>
                  <el-menu-item index="2-1" @click="duoSearchC('', 'jingyan')"
                    >不限</el-menu-item
                  >
                  <el-menu-item
                    index="2-2"
                    @click="duoSearchC('1年以下', 'jingyan')"
                    >1年以下</el-menu-item
                  >
                  <el-menu-item
                    index="2-3"
                    @click="duoSearchC('1-3年', 'jingyan')"
                    >1-3年</el-menu-item
                  >
                  <el-menu-item
                    index="2-4"
                    @click="duoSearchC('3-5年', 'jingyan')"
                    >3-5年</el-menu-item
                  >
                  <el-menu-item
                    index="2-5"
                    @click="duoSearchC('5-10年', 'jingyan')"
                    >5-10年</el-menu-item
                  >
                  <el-menu-item
                    index="2-6"
                    @click="duoSearchC('10年以上', 'jingyan')"
                    >10年以上</el-menu-item
                  >
                </el-submenu>
                <el-submenu index="3">
                  <template slot="title">学历</template>
                  <el-menu-item index="3-1" @click="duoSearchC('', 'xueli')"
                    >不限</el-menu-item
                  >
                  <el-menu-item
                    index="3-2"
                    @click="duoSearchC('初中及以下', 'xueli')"
                    >初中及以下</el-menu-item
                  >
                  <el-menu-item index="3-3" @click="duoSearchC('高中', 'xueli')"
                    >高中</el-menu-item
                  >
                  <el-menu-item index="3-4" @click="duoSearchC('中专', 'xueli')"
                    >中专</el-menu-item
                  >
                  <el-menu-item index="3-5" @click="duoSearchC('大专', 'xueli')"
                    >大专</el-menu-item
                  >
                  <el-menu-item index="3-6" @click="duoSearchC('本科', 'xueli')"
                    >本科</el-menu-item
                  >
                  <el-menu-item index="3-7" @click="duoSearchC('硕士', 'xueli')"
                    >硕士</el-menu-item
                  >
                  <el-menu-item index="3-8" @click="duoSearchC('博士', 'xueli')"
                    >博士</el-menu-item
                  >
                </el-submenu>
                <el-submenu index="4">
                  <template slot="title">发布时间</template>
                  <el-menu-item index="4-1" @click="duoSearchC('', 'time')"
                    >不限</el-menu-item
                  >
                  <el-menu-item index="4-2" @click="duoSearchC('当天', 'time')"
                    >当天</el-menu-item
                  >
                  <el-menu-item index="4-3" @click="duoSearchC('3', 'time')"
                    >3天内</el-menu-item
                  >
                  <el-menu-item index="4-4" @click="duoSearchC('7', 'time')"
                    >7天内</el-menu-item
                  >
                  <el-menu-item index="4-5" @click="duoSearchC('15', 'time')"
                    >15天内</el-menu-item
                  >
                  <el-menu-item index="4-6" @click="duoSearchC('30', 'time')"
                    >30天内</el-menu-item
                  >
                </el-submenu>
              </el-menu>
            </div>
            <div class="ri_search"></div>
          </div>
          <div class="right_gong_list_sy">
            <div
              class="cc_li"
              v-for="(item, index) in dataList"
              :key="index"
            >
              <div class="pt1_g">
                <div class="tt1" @click="showZhaoDetail(item)">
                  {{ item.title }}
                </div>
                <div class="tt2" @click="showZhaoDetail(item)">
                  {{ item.location }}
                </div>
                <div class="yan icon">验</div>
                <div class="ding icon" v-if="index == 0">顶</div>
                <div class="huo icon" v-if="index < 2">火</div>
              </div>
              <div class="pt2_g">
                <div class="sm_con">工作地点 ：{{ item.gongzuoaddress }}</div>
                <div class="sm_con">月薪 ：{{ item.xinzidaiyun }}</div>
                <div class="sm_con">职位类型 ：{{ item.type }}</div>
                <div class="sm_con">{{ item.zhiweitype }}</div>
              </div>
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="pageN"
              layout="prev, pager, next, jumper"
              :total="gongRightList.length"
              v-if="gongRightList.length > 3"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    
    

    <div class="evm_popu" v-show="toupiaoSy">
      <div class="title_t">
        <div class="ll">投票二维码</div>
        <div class="icon el-icon-circle-close"  @click="closeTou"></div>
      </div>
      <div id="qrcode"></div>
      <div class="text_e">微信扫描二维码</div>
      <el-button class="btn_close" size="small" type="primary" @click="closeTou">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import City from "@/until/city.js";
import QRCode from 'qrcodejs2'
export default {
  components: {},
  data() {
    return {
      searchKey: "",
      isZhaopin: false,
      huangNav: [
        // { title: "企业招聘", url: "" },
        { title: "人才求职", url: "" },
        { title: "投票管理", url: "" },
      ],
      huangNavSel: 0,
      tuiguangList: [],
      activeIndex: "1",
      currentPage3: 1,
      gongRightList: [],
      dataList:[],
      cityList: [],
      cityListSel: 0,
      danweileixing: [],
      danweileixingSel: 0,
      xinshouSel: "",
      jingyanSel: "",
      xueliSel: "",
      timeSel: "",
      isZhaoDetail: false,
      currentItem: {},
      pageN:10,
      toupiaoList:[],
      toupiaoSy:false
    };
  },
  watch:{
    $route: {
      handler: function(val, oldVal){
        this.huangNavSel = val.query.sel;
      },
      // 深度观察监听
      deep: true
    }
  },
  mounted() {
    this.huangNavSel = this.$route.query.sel;
    this.cityList = City;
    //资源类型
    this.$getApi("/common/danweitype", {}).then((res) => {
      console.log(res);
      this.danweileixing = res.data;
    });
    //推广
    this.$getApi("/common/qiyezhaopin", {}).then((res) => {
      console.log(res);
      this.tuiguangList = res.data.splice(0, 5);
    });

    //投票
    this.$getApiNew("/home/share/votelist",{}).then((res) => {
     console.log(res,"投票");
     this.toupiaoList = res.data.data;
    //  let dd = []
    //   for(let i = 0;i<12;i++){
    //      dd.push(res.data.data[0])
    //   }
    //   console.log(dd)
    //   this.toupiaoList = dd
    });
    
    this.duoSearchC("", "xinchou");
  },
  methods: {
    seeEvm(url){
      this.closeTou();
       var qrcode = new QRCode(document.getElementById("qrcode"), {
            width: 188,
            height: 188,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
        qrcode.makeCode(url);
        this.toupiaoSy = true;
    },
    closeTou(){
      this.toupiaoSy = false;
      document.getElementById("qrcode").innerHTML = ""
    },
    showZhaoDetail(item) {
      console.log(item);
      this.currentItem = item;
      this.isZhaoDetail = true;
    },
    changeQiuzhi(item, index) {
      this.isZhaopin = item.title == "企业招聘" ? true : false;
      this.huangNavSel = index;
      this.isZhaoDetail = false;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
       this.currentPage3 = val
      console.log(`当前页: ${val}`);
      console.log(this.gongRightList ,(this.currentPage3-1)*this.pageN ,this.pageN)
      this.dataList = this.gongRightList.slice((this.currentPage3-1)*this.pageN,this.currentPage3*this.pageN)
      console.log(this.dataList)
    },
    ccc(pp) {
      console.log(pp);
    },
    nativeTo(item) {
      if (item == "login") {
        this.$router.push({ path: "/login" });
      } else {
        this.$router.push({ path: "/huangyeSel" });
      }
    },
    duoSearchC(item, type) {
      console.log(item, type);
      if (type == "key") {
        this.$getApi("/common/qiyezhaopin", { key: this.searchKey }).then(
          (res) => {
            console.log(res);
            this.gongRightList = res.data || [];
            this.currentPage3 = 1;
            if(this.gongRightList.length > 0){
              this.dataList = this.gongRightList.slice(0,this.pageN)
            }else{
              this.dataList = []
            }


          }
        );
        return false;
      } else {
        this.searchKey = "";
      }

      if (type == "xinchou") {
        this.xinshouSel = item;
      }
      if (type == "jingyan") {
        this.jingyanSel = item;
      }
      if (type == "xueli") {
        this.xueliSel = item;
      }
      if (type == "time") {
        this.timeSel = item;
      }
      let dataL = {
        xinzidaiyun: this.xinshouSel,
        xueli: this.xueliSel,
        gongzuonx: this.jingyanSel,
        time: this.timeSel,
      };
      this.$getApi("/common/qiyezhaopin", dataL).then((res) => {
        console.log(res);
        this.gongRightList = res.data || [];
        this.currentPage3 = 1;
        if(this.gongRightList.length > 0){
          this.dataList = this.gongRightList.slice(0,this.pageN)
        }else{
          this.dataList = []
        }
      });
    },
    duoSearch(index, type) {
      if (type == "ziyuan") {
        this.danweileixingSel = index;
      }
      if (type == "yewu") {
        this.yewuleixingSel = index;
      }
      if (type == "quyu") {
        this.cityListSel = index;
      }
      if (type == "key") {
        this.$getApi("/common/companylist", { key: this.biaotiInput }).then(
          (res) => {
            console.log(res);
            this.gongRightList = res.data || [];
            this.currentPage3 = 1;
            if(this.gongRightList.length > 0){
              this.dataList = this.gongRightList.slice(0,this.pageN)
            }else{
              this.dataList = []
            }
          }
        );
        return false;
      }
      let yewutype = "";
      let ziyuantype = "";
      let city = "";
      if (this.danweileixingSel != 0) {
        console.log(
          this.danweileixing,
          this.danweileixing[this.danweileixingSel - 1]
        );
        ziyuantype = this.danweileixing[this.danweileixingSel - 1].name;
      } else {
        ziyuantype = "";
      }
      if (this.yewuleixingSel != 0) {
        yewutype = this.yewuleixing[this.yewuleixingSel - 1].name;
      } else {
        yewutype = "";
      }
      if (this.cityListSel != 0) {
        city = this.cityList[this.cityListSel - 1].provinceName;
      } else {
        city = "";
      }
      // let dataL = {
      //   yewutype:yewutype,
      //   ziyuantype: ziyuantype,
      //   city: city,
      // };
      // this.$getApi("/common/companylist", dataL).then((res) => {
      //   console.log(res);
      //   this.gongRightList = res.data
      // });
    },
  },
};
</script>
<style lang=stylus>
.right_nav_qz {
  .el-menu--horizontal>.el-submenu .el-submenu__title {
    height: 40px;
    line-height: 40px;
  }
}
</style>
<style scoped lang="stylus">
.evm_popu{
  width:260px;
  height:360px;
  position:fixed;
  top:50%;
  left:50%;
  margin-top -180px;
  margin-left -130px;
  background-color #fff;
  border 1px solid #409EFF
  .title_t{
    background-color #409EFF
    display flex;
    justify-content space-between
    color:#fff;
    padding:6px 10px
    align-items center
    .icon{
      color #f00
      font-size 20px
      cursor:pointer;
      opacity:.7
      &:hover{
         opacity:1
      }
    }
  }
  #qrcode{
    padding:20px 0
    display flex;
    justify-content center

  }
  .text_e{
    text-align center
    font-size 18px
    margin-bottom 20px
  }
  .btn_close{
    width 80%;
    margin 0 auto
    display block
  }
}
.toupiao_right{
  width 764px
  max-height 500px;
  overflow-y auto;
  .tou{
    display flex 
    margin-bottom 10px
    .leftt_img{
      height:94px


    }
    .tt_right{
      background-color #f0f0f0;
      padding 6px 20px 6px 10px
      flex:1;
      border-radius 0 6px 6px 0
      .titlec{
        font-size 16px
        color:#000

      }
      .tt2{
        font-size 14px
        color:#666
      }
      .flex_d{
        display flex;
        justify-content space-between
        padding-top 10px
      }
    }
  }
}
.nav_c_left {
  position: relative;

  .search_name {
    width: 300px;
    top: 2px;
    right: 10px;
    position: absolute;
    z-index: 8;
  }
}

.qiuzhi {
  .huangye_body {
    width: 1000px;
    margin: 0 auto;
    padding-top: 0px;
  }

  .fill_img {
    padding-top: 12px;
    cursor: pointer;
  }

  .qiuzhi_content {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;

    .content_left {
      width: 226px;

      .tui_img {
        margin-top: 8px;
      }

      .tuiguang {
        .title_c {
          height: 36px;
          line-height: 36px;
          background-color: #2172ce;
          font-size: 16px;
          color: #fff;
          padding-left: 20px;
          
        }
      }
    }

    .content_right_detail {
      width: 764px;

      .zhaopin_tit {
        line-height: 46px;
        background-color: #f0f0f0;
        padding-left: 20px;

        .iconfont {
          color: #2172ce;
        }
      }

      .zhaopin_desc {
        padding: 10px 20px;
      }

      .zhaopin_ctrl {
        display: flex;
        justify-content: space-around;
        padding: 20px 0;

        .btn {
          width: 30%;
          font-size: 15px;
        }
      }

      .row_hang {
        line-height: 30px;
        font-size: 15px;

        .col_title {
          text-align: right;
          color: #666;
          padding-right: 4px;
        }
      }

      .right_pt1 {
        text-align: center;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        margin-bottom: 16px;

        .p_title {
          line-height: 46px;
          font-size: 16px;
          border-bottom: 1px solid #ccc;
        }

        .p_info {
          line-height: 46px;

          .orange {
            color: #e04c07;
            padding: 0 2px;
          }
        }
      }
    }

    .content_right {
      width: 764px;
    }
  }
}

.shangxuan_sy {
  border: 1px solid #f0f0f0;
  margin-top: 16px;

  .search_c {
    display: flex;
    padding: 10px;

    .title_p {
      font-size: 16px;
      padding-right: 10px;
      width: 80px;
      flex-shrink: 0;
    }

    .leibie {
      display: inline-flex;
      flex-wrap: wrap;

      .li_text {
        +.li_text {
          border-left: 1px solid #f0f0f0;
        }

        height: 26px;
        line-height: 26px;
        padding: 0 20px;
        margin-bottom: 4px;
        color: #0a4678;
        cursor: pointer;

        &:hover {
          color: #ff702d;
        }
      }

      .li_text.active {
        color: #ff702d;
      }
    }
  }
}

.right_gong_list_sy {
  padding: 6px 6px 10px;
  background-color: #f0f0f0;

  .cc_li {
    background-color: #fff;
    padding: 10px 12px 16px;
    margin-bottom: 6px;
    border-radius: 4px;

    .pt1_g {
      display: flex;
      padding: 6px 0;

      .tt1 {
        color: #C31111;
        font-size: 16px;
        margin-right: 20px;
        cursor: pointer;
      }

      .tt2 {
        font-size: 16px;
        color: #666;
        padding-right: 6px;
        cursor: pointer;
      }

      .icon {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin-left: 6px;
        color: #fff;
        border-radius: 4px;

        &.yan {
          background-color: #50AB0D;
        }

        &.ding {
          background-color: #CC9104;
        }

        &.huo {
          background-color: #F4250F;
        }
      }
    }

    .pt2_g {
      display: flex;
      color: #999;

      .sm_con {
        margin-right: 20px;
      }
    }
  }
}

.tuiguang_li_sy {
  padding: 6px 4px 0 4px;
  background-color: #f0f0f0;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;

  .nei_bd {
    background-color: #fff;
    padding: 2px 6px 6px;

    &:hover {
      // background-color #007ce0
      // cursor pointer
      // .title_t{
      // color #fff
      // }
      // .neirong{
      // color #fff
      // }
      box-shadow: 0px 0px 6px #007ce0 inset;
      border-radius: 4px;
    }
  }

  .title_t {
    height: 32px;
    line-height: 32px;
    padding-left: 10px;
    color: #2172ce;
    font-size: 16px;
    cursor: pointer;
  }

  .con_c {
    .neirong {
      padding-left: 10px;
    }
  }
}
</style>
